<template>
<div>
      <v-card>
        <v-container
          fluid
          grid-list-md
        >
        <span class="md-subheading">电影热播</span>
          <v-layout row wrap>
            <v-flex
              v-for="card in cards"
              xs4
              :key="card.title"
            >
              <v-card>
                <v-img
                  :src="card.src"
                  height="200px"
                  aspect-ratio="0.7"
                  max-height="169"
                >
                </v-img>
              </v-card>
               <span class="md-body-2">{{card.title}}</span>
               </v-flex>
          </v-layout>
        </v-container>
      </v-card>
</div>
</template>

<script>
export default {
    name:"Mindex",
    data(){
        return{
            cards: [
        { title: 'Pre-fab homes1', src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg'},
        { title: 'Favorite road trips1', src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg'},
        { title: 'Best airlines1', src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg',},
        { title: 'Pre-fab homes2', src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg'},
        { title: 'Favorite road trips2', src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg'},
        { title: 'Best airlines2', src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg',},
        { title: 'Pre-fab homes', src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg'},
        { title: 'Favorite road trips', src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg'},
        { title: 'Best airlines', src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg',}
         ]
        }
    }
}
</script>

<style scoped>
.topset{
   margin-top: -22px;
}
</style>


